<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts</title>
    <link rel="stylesheet" href="./echarts.css">
    <link rel="stylesheet" href="./echarts.less">
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <div class="box">
        <!-- 头 -->
        <div class="tab"></div>
        <!-- 体 -->
        <div class="table">
            <div class="left">
                <div class="left_1" >
                    <img src="../images/border.png" alt="" srcset="" class="imgs1">
                    <ul class="left_ul">
                        <li class="left_li">2190</li>
                        <li class="left_li">190</li>
                        <li class="left_li">3001</li>
                        <li class="left_li">108</li>
                    </ul>
                </div>
                <div class="left_2">
                    <img src="../images/border.png" alt="" srcset="" class="imgs1">
                    <div class="left_2_1">
                        <p>故障设备监控&nbsp;&nbsp;|&nbsp;&nbsp;<span style="color: blue;">异常设备监控</span></p>
                        <ul class="left_2_ul">
                            <li class="left_2_li">故障时间</li>
                            <li class="left_2_ll">设备地址</li>
                            <li class="left_2_li">异常代码</li>
                        </ul>
                        <div class="marquee-view">
                            <div class="marquee">
                                <ul class="left_2_ui">
                                    <li class="left_2_lo">20190601</li>
                                    <li class="left_2_lo">北京市昌平区城西路金应龙写字楼</li>
                                    <li class="left_2_lo">1000002</li>
                                </ul> 
                                <ul class="left_2_ui">
                                    <li class="left_2_lo">20190601</li>
                                    <li class="left_2_lo">北京市昌平区城西路金应龙写字楼</li>
                                    <li class="left_2_lo">1000002</li>
                                </ul> 
                                <ul class="left_2_ui">
                                    <li class="left_2_lo">20190601</li>
                                    <li class="left_2_lo">北京市昌平区城西路金应龙写字楼</li>
                                    <li class="left_2_lo">1000002</li>
                                </ul> 
                                <ul class="left_2_ui">
                                    <li class="left_2_lo">20190601</li>
                                    <li class="left_2_lo">北京市昌平区城西路金应龙写字楼</li>
                                    <li class="left_2_lo">1000002</li>
                                </ul> 
                                <ul class="left_2_ui">
                                    <li class="left_2_lo">20190601</li>
                                    <li class="left_2_lo">北京市昌平区城西路金应龙写字楼</li>
                                    <li class="left_2_lo">1000002</li>
                                </ul> 
                                
                            </div>
                        </div> 
                    </div>
                </div>
                <div class="left_3"> 
                    <img src="../images/border.png" alt="" srcset="" class="left_3_img">
                    <div class="left_3_box">
                        <div class="left_3_box1">
                            <p>点击分布统计</p>
                            <div class="pie"></div>
                        </div>
                        <div class="left_3_box2">
                            <span style="color: #fff;">320,11</span><br><span style="color: #3279d2;font-size: 10px;"><d style="color: red;font-weight: 900;">| </d>桌位总数<br><br></span>
                            <span style="color: #fff;">418</span><br><span style="color: #3279d2;font-size: 10px;"><d style="color: yellow;font-weight: 900;">| </d>本月新增</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zhong">
                <div class="zhong_1">
                    <p>设备数据统计</p>
                    <img src="../images/rect.png" alt="" srcset="" class="zhong_1_img1">
                    <img src="../images/border.png" alt="" srcset="" class="zhong_1_img2">
                    <div class="zhong_2">
                        <span style="color: #fff;padding-top: 15px;">全国用户总量统计</span>
                        <div class="const"></div>
                        <div class="zhong_2-1"><br><br>
                            <span style="color: #fff;">320,11</span><br><span style="color: #3279d2;font-size: 10px;"><d style="color: red;font-weight: 900;">| </d>桌位总数<br><br></span>
                            <span style="color: #fff;">418</span><br><span style="color: #3279d2;font-size: 10px;"><d style="color: yellow;font-weight: 900;">| </d>本月新增</span>
                        </div>
                    </div> 
                </div> 
            </div>
            <div class="right">
                <div class="right_1">
                    <div class="right_1_1">
                        <p class="p1" style="padding-left: 17px;">365天<span style="color: darkcyan;font-weight: 900;padding: 0 10px;">|</span><span style="color: #3279d2;">90天</span><span style="color: darkcyan;font-weight: 900;padding: 0 10px;">|</span><span style="color: #3279d2;">30天</span><span style="color: darkcyan;font-weight: 900;padding: 0 10px;">|</span><span style="color: #3279d2;">24小时</span></p>
                        <span class="sp1" style="padding:0px 20px;">20,301,987</span><span style="padding:0px 20px;">99834</span><p class="p2" style="color: #3279d2;"><d style="color: red;font-weight: 900;padding-left: 20px;">| </d>订单量<d style="color: yellow;font-weight: 900;padding-left: 82px;">| </d>销售额(万元)</p>
                    </div>
                </div>
                <div class="right_2">
                    <div class="footer"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/echarts.js"></script>
    <script src="./js/echarts1.js"></script>
    <!-- <script src="./js/echarts2.js"></script> -->
    <script src="./js/echarts3.js"></script>
    <!-- <div class="gui"></div> -->
</body>
</html>
